<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
  <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
  <script src="../../scripts/Thrive.js"  type="text/javascript"></script>
  <script src="MindMap.js" type="text/javascript"></script>
  <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
  
  <link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>

<body>
    <div data-role="page" id="mindmap" data-theme="a">
    
        <div class="popup_container" style="display:none;">
            <div class="popup"></div>
        </div>
	
		<script type="text/javascript">
		
		var mapCtx;
		var mapWidth;
		var	mapHeight;
		var mapX;
		var mapY;
		var mapMove = false;
		var finished = false;
		var startNew = true;
		
		var mapWordsXPos = new Array();
		var mapWordsYPos = new Array();
		
		var mapWordsNum = 40;
		var mapWordsCur = 0;
		var mapWords = new Array();
		mapWords[0] = "Happy";                        //REQUIRED
		mapWords[1] = "Grumpy";
		mapWords[2] = "Mean";
		mapWords[3] = "Caring"; //INTERPERSONAL POSITIVE
		mapWords[4] = "Joyful";
		mapWords[5] = "Kind";
		mapWords[6] = "Nice";
		mapWords[7] = "Popular";
		mapWords[8] = "Good";
		mapWords[9] = "Funny";
		mapWords[10] = "Helpful";
		mapWords[11] = "Friendly";
		mapWords[12] = "Alone"; //INTERPERSONAL NEGATIVE
		mapWords[13] = "Dull";
		mapWords[14] = "Shy";
		mapWords[15] = "Pushy";
		mapWords[16] = "Unloved";
		mapWords[17] = "Unwanted";
		mapWords[18] = "Boring";
		mapWords[19] = "Ugly";
		mapWords[20] = "Lonely";
		mapWords[21] = "Intelligent"; //ACHIEVEMENTPOSITIVE
		mapWords[22] = "Successful";
		mapWords[23] = "Talented";
		mapWords[24] = "Exceptional";
		mapWords[25] = "Smart";
		mapWords[26] = "Brave";
		mapWords[27] = "Proud";
		mapWords[28] = "Clever";
		mapWords[29] = "Winner";
		mapWords[30] = "Criticized";  //ACHIEVEMENT NEGATIVE
		mapWords[31] = "Helpless";
		mapWords[32] = "Hurried";
		mapWords[33] = "Incompetent";
		mapWords[34] = "Lazy";
		mapWords[35] = "Stupid";
		mapWords[36] = "Embarrassed";
		mapWords[37] = "Terrible";
		mapWords[38] = "Bad";
		mapWords[39] = "Finished";   //REQUIRED
		
		$(window).resize(function() {
			$('#mapCanvas')[0].width = window.innerWidth;
			$('#mapCanvas')[0].height = window.innerHeight - 105;
			mapCtx = $('#mapCanvas')[0].getContext("2d");

			mapWidth = $('#mapCanvas')[0].width;
			mapHeight = $('#mapCanvas')[0].height;
			drawCanvas();
			$("#mapCanvas").trigger("create");
			$("#mapCanvasDiv").trigger("create");
			$("#mapContent").trigger("create");
			//moveit('sphere', mapWidth/2 - 3, mapHeight/2 + 20);
		});
		
		$("#mindmap").live('pagecreate', function() {
			mindmap_prefetch();
		});
		
		$("#mapSubmitButton").live('click', function() {
			mapCalc();
			sendMindMap();
		});
		
		$("#mindmap").live('pagebeforeshow', function() {
			$('#mapCanvas')[0].width = window.innerWidth;
			$('#mapCanvas')[0].height = window.innerHeight - 105;
			mapCtx = $('#mapCanvas')[0].getContext("2d");

			mapWidth = $('#mapCanvas')[0].width;
			mapHeight = $('#mapCanvas')[0].height;
			//alert(mapWidth + ", " + mapHeight);
			
			
			//randomize word order
			for (i = 0; i < mapWordsNum; i++) {
				var mapRand1 = Math.floor(Math.random()*(mapWordsNum-1));
				var mapRand2 = Math.floor(Math.random()*(mapWordsNum-1));
				var mapSwap;
				
				mapSwap = mapWords[mapRand1];
				mapWords[mapRand1] = mapWords[mapRand2];
				mapWords[mapRand2] = mapSwap;
			}
			
			
			drawCanvas();
			
			if(startNew) {
				mapNextWord();
				startNew = false;
			}
		});
		
		function drawCanvas() {
			
			mapCtx.strokeStyle = "#666";
			mapCtx.beginPath();
			mapCtx.moveTo(mapWidth/2, 0);
			mapCtx.lineTo(mapWidth/2-3, 10);
			mapCtx.lineTo(mapWidth/2+3, 10);
			mapCtx.closePath();
			mapCtx.fill();
			moveit('mapYposLabel', mapWidth/2 + 2, 44);
			
			mapCtx.beginPath();
			mapCtx.moveTo(mapWidth/2, mapHeight);
			mapCtx.lineTo(mapWidth/2-3, mapHeight - 10);
			mapCtx.lineTo(mapWidth/2+3, mapHeight - 10);
			mapCtx.closePath();
			mapCtx.fill();
			moveit('mapYnegLabel', mapWidth/2 + 2, mapHeight + 22);
			
			mapCtx.beginPath();
			mapCtx.moveTo(0, mapHeight/2);
			mapCtx.lineTo(10, mapHeight/2-3);
			mapCtx.lineTo(10, mapHeight/2+3);
			mapCtx.closePath();
			mapCtx.fill();
			moveit('mapXnegLabel', 12, mapHeight/2 + 26 );
			
			mapCtx.beginPath();
			mapCtx.moveTo(mapWidth, mapHeight/2);
			mapCtx.lineTo(mapWidth - 10, mapHeight/2-3);
			mapCtx.lineTo(mapWidth - 10, mapHeight/2+3);
			mapCtx.closePath();
			mapCtx.fill();
			moveit('mapXposLabel', mapWidth - 65, mapHeight/2 + 26 );
			
			mapCtx.beginPath();
			mapCtx.moveTo(mapWidth/2, 0);
			mapCtx.lineTo(mapWidth/2, mapHeight);
			mapCtx.stroke();
			
			mapCtx.beginPath();
			mapCtx.moveTo(0, mapHeight/2);
			mapCtx.lineTo(mapWidth, mapHeight/2);
			mapCtx.stroke();	
		}
		
		function moveit(id,x,y) {
			//alert(id);
			document.getElementById(id).style.left= x + "px";
			document.getElementById(id).style.top= y + "px";
		}
		
		function mapNextWord() {
			
			var tempX = (mapX - mapWidth / 2) / (mapWidth / 2);
			if (tempX < -1) {
				tempX = -1;
			} 
			else if (tempX > 1) {
				tempX = 1;
			}
			
			var tempY = -(mapY - 42 - mapHeight / 2) / (mapHeight / 2);
			if (tempY < -1) {
				tempY = -1;
			} 
			else if (tempY > 1) {
				tempY = 1;
			}
			
			if (mapWordsCur < mapWordsNum-1) {
				
				if (mapWordsCur != 0) {
					/* This is important */
					document.getElementById('map_text-' + (mapWordsCur-1)).innerHTML = tempX + "," + tempY + ":" + mapWords[mapWordsCur-1];
					mapWordsXPos[mapWordsCur-1] = tempX;
					mapWordsYPos[mapWordsCur-1] = tempY;
					
				}
				document.getElementById('mapAdjective').innerHTML = mapWords[mapWordsCur];
				document.getElementById('nextWordButton').style.display = "none";
				mapWordsCur++;
				moveit('sphere', mapWidth/2 - 3, mapHeight/2 + 20);
			} 
			
			else {
				
				document.getElementById('map_text-' + (mapWordsCur-1)).innerHTML = tempX + "," + tempY + ":" + mapWords[mapWordsCur-1];
				document.getElementById('mapAdjective').innerHTML = mapWords[mapWordsCur];
				moveit('sphere', mapWidth/2 - 3, mapHeight/2 + 31);
				
				document.getElementById('nextWordButton').style.display = "none";
				document.getElementById('mapSubmitButton').style.display = "block";
				finished = true;
			}
		}
		
		function mapCalc() {
			document.getElementById('map_pos_field').innerHTML = mapPosCalculation();
			document.getElementById('map_neg_field').innerHTML = mapNegCalculation();
			//alert('pos score = ' + mapPosCalculation() + '; neg score = ' + mapNegCalculation());
		}
		
		function mapPosCalculation() {
			var sum = 0;
			var count = 0;
			var tempArray = new Array();
			
			for (i = 0; i < mapWordsNum; i++) {
				
				if (mapWordsXPos[i] > 0) {
					if (mapWordsYPos[i] > 0) {
						tempArray[count] = i;
						count = count + 1;
					}
				}
			}
			
			for (i = 0; i < count-1; i++) {
				for (j = i + 1; j < count; j++) {
					sum = sum + Math.pow((mapWordsXPos[tempArray[i]] - mapWordsXPos[tempArray[j]]), 2);
					sum = sum + Math.pow((mapWordsYPos[tempArray[i]] - mapWordsYPos[tempArray[j]]), 2);
				}
			}
			
			if (count == 0) {
				return -1;
			} 
			else if (count == 1) {
				return 0;
			}
			else {
				sum = Math.sqrt(sum);
				sum = sum / ((count*(count-1))/2);
				return sum;
			}
		}
		
		function mapNegCalculation() {
			var sum = 0;
			var count = 0;
			var tempArray = new Array();
			
			for (i = 0; i < mapWordsNum; i++) {
				
				if (mapWordsXPos[i] > 0) {
					if (mapWordsYPos[i] < 0) {
						tempArray[count] = i;
						count = count + 1;
					}
				}
			}
			
			for (i = 0; i < count-1; i++) {
				for (j = i + 1; j < count; j++) {
					sum = sum + Math.pow((mapWordsXPos[tempArray[i]] - mapWordsXPos[tempArray[j]]), 2);
					sum = sum + Math.pow((mapWordsYPos[tempArray[i]] - mapWordsYPos[tempArray[j]]), 2);
				}
			}
			
			if (count == 0) {
				return -1;
			} 
			else if (count == 1) {
				return 0;
			}
			else {
				sum = Math.sqrt(sum);
				sum = sum / ((count*(count-1))/2);
				return sum;
			}
		} 

		$('#mapContent').bind( 'vmousedown', function( e ) {
			e.preventDefault();
			mapMove = true;
			
			mapX = e.pageX;
			mapY = e.pageY;
			
			if (mapY > mapHeight + 32) {
				mapY = mapHeight + 32;
			}
			if (mapX > mapWidth) {
				mapX = mapWidth;
			}
			
			document.getElementById('smallMarkerBall').style.display = "none";
			document.getElementById('largeMarkerBall').style.display = "inline";
			document.getElementById('mapAdjective').style.fontSize = "26px";
			
			moveit('sphere', mapX, mapY);
		} );
		
		$('#mapContent').bind( 'vmouseup', function( e ) {
			e.preventDefault();
			mapMove = false;
			
			if (!finished) {
				document.getElementById('nextWordButton').style.display = "block";
			}
			
			
			document.getElementById('smallMarkerBall').style.display = "inline";
			document.getElementById('largeMarkerBall').style.display = "none";
			document.getElementById('mapAdjective').style.fontSize = "16px";
			//store data in an array
			//move to hidden form
			//do it in javascript/jquery, form.submit
			//should be a 'post'
			//or not submit until they hit a next button
			//use the div display="blah" to control the button
		} );
		
		$('#mapContent').bind( 'vmousemove', function( e ) {
			e.preventDefault();
			if (mapMove) {
				mapX = e.pageX;
				mapY = e.pageY;
							
				if (mapY > mapHeight + 32) {
					mapY = mapHeight + 32;
				}
				if (mapX > mapWidth) {
					mapX = mapWidth;
				}

				moveit('sphere', mapX, mapY);
				//return false;
			}
		} );
		
		$(".popup_container").live('click', function() {
			removePopup();
		});
		
		$(".popup_container").live('tap', function() {
			removePopup();
		});
		
		$(".popup_container").bind('touchstart', function()  {
			removePopup();
		});
		</script>
    
    <div data-role="header" data-theme="a">
    	<a href="../../index.html" data-role="button" data-icon="arrow-l">Thrive</a>
        <h1>Mind Map</h1>
        <a href="info.html" data-icon="info">Info</a>
    </div>
    
    <div data-role="content" id="mapContent" data-theme="a">
		<div id="mapCanvasDiv" style="display:block">
			<canvas id="mapCanvas"></canvas>
		</div>
		<div ID="sphere" STYLE="z-index: 4; position:absolute; left: 50px; top: 50px;">
			<div id="smallMarkerBall" style="display: inline;"><IMG SRC="mrkball2.png" WIDTH="6" HEIGHT="6"></div>
			<div id="largeMarkerBall" style="display : none;"><IMG SRC="mrkball2.png" WIDTH="35" HEIGHT="35"></div>
			<div id="mapAdjective" style="display: inline; overflow:hidden;">Adjective</div>
		</div>
		<div id="mapXposLabel" style="position:absolute;">Like Me</div>
		<div id="mapXnegLabel" style="position:absolute;">Not Like Me</div>
		<div id="mapYposLabel" style="position:absolute;">Positive</div>
		<div id="mapYnegLabel" style="position:absolute;">Negative</div>
		
    </div>
	    
	<a id="nextWordButton" data-role="button" style="display: none;" onclick="mapNextWord()">Next</a>
	<a id="mapSubmitButton" data-role="button" style="display: none;">Submit</a>
	
	<form id="mindMap_form" selected="true" style="display:none">
		<textarea id="map_text-0" name="map_word_0">0,0:0</textarea>
		<textarea id="map_text-1" name="map_word_1">0,0:1</textarea>
		<textarea id="map_text-2" name="map_word_2">0,0:2</textarea>
		<textarea id="map_text-3" name="map_word_3">0,0:3</textarea>
		<textarea id="map_text-4" name="map_word_4">0,0:4</textarea>
		<textarea id="map_text-5" name="map_word_5">0,0:5</textarea>
		<textarea id="map_text-6" name="map_word_6">0,0:6</textarea>
		<textarea id="map_text-7" name="map_word_7">0,0:7</textarea>
		<textarea id="map_text-8" name="map_word_8">0,0:8</textarea>
		<textarea id="map_text-9" name="map_word_9">0,0:9</textarea>
		<textarea id="map_text-10" name="map_word_10">0,0:10</textarea>
		<textarea id="map_text-11" name="map_word_11">0,0:11</textarea>
		<textarea id="map_text-12" name="map_word_12">0,0:12</textarea>
		<textarea id="map_text-13" name="map_word_13">0,0:13</textarea>
		<textarea id="map_text-14" name="map_word_14">0,0:14</textarea>
		<textarea id="map_text-15" name="map_word_15">0,0:15</textarea>
		<textarea id="map_text-16" name="map_word_16">0,0:16</textarea>
		<textarea id="map_text-17" name="map_word_17">0,0:17</textarea>
		<textarea id="map_text-18" name="map_word_18">0,0:18</textarea>
		<textarea id="map_text-19" name="map_word_19">0,0:19</textarea>
		<textarea id="map_text-20" name="map_word_20">0,0:20</textarea>
		<textarea id="map_text-21" name="map_word_21">0,0:21</textarea>
		<textarea id="map_text-22" name="map_word_22">0,0:22</textarea>
		<textarea id="map_text-23" name="map_word_23">0,0:23</textarea>
		<textarea id="map_text-24" name="map_word_24">0,0:24</textarea>
		<textarea id="map_text-25" name="map_word_25">0,0:25</textarea>
		<textarea id="map_text-26" name="map_word_26">0,0:26</textarea>
		<textarea id="map_text-27" name="map_word_27">0,0:27</textarea>
		<textarea id="map_text-28" name="map_word_28">0,0:28</textarea>		
		<textarea id="map_text-29" name="map_word_29">0,0:29</textarea>
		<textarea id="map_text-30" name="map_word_30">0,0:30</textarea>
		<textarea id="map_text-31" name="map_word_31">0,0:31</textarea>
		<textarea id="map_text-32" name="map_word_32">0,0:32</textarea>
		<textarea id="map_text-33" name="map_word_33">0,0:33</textarea>
		<textarea id="map_text-34" name="map_word_34">0,0:34</textarea>
		<textarea id="map_text-35" name="map_word_35">0,0:35</textarea>
		<textarea id="map_text-36" name="map_word_36">0,0:36</textarea>
		<textarea id="map_text-37" name="map_word_37">0,0:37</textarea>
		<textarea id="map_text-38" name="map_word_38">0,0:38</textarea>
		<textarea id="map_pos_field" name="likeme_pos_score">0</textarea>
		<textarea id="map_neg_field" name="likeme_neg_score">0</textarea>
    </form>
	
    </div>
</body>

</html>
